<script setup lang="ts">
import { getIpInfo, getTestMock } from "@/api/getUrl/getUrl";
import { message } from "@/utils/message";
defineOptions({
  name: "UrlIndex"
});
// 获取ip信息
const getIpInfoFn = async () => {
  const res = await getIpInfo();
  if (res.success) {
    let info = res.info;
    message(
      "获取成功，ip：" +
        res.ip +
        `  ${info.country} ${info.city} ${info.prov} ${info.isp}`,
      { type: "success" }
    );
  } else {
    message("获取失败" + res.msg, { type: "error" });
  }

  console.log(res);
};

const testFn = async () => {
  const res = await getTestMock();
  if (res.success) {
    message("获取成功  " + res.data.test, { type: "success" });
  } else {
    message("获取失败" + res.msg, { type: "error" });
  }
};
</script>

<template>
  <div>
    <h1>获取url页面</h1>
    <div>
      <p class="mb-2!">
        免费api接口地址：
        <a href="https://api.vvhan.com/">https://api.vvhan.com/</a>
      </p>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>获取当前ip位置</span>
              </div>
            </template>
            <div class="flex-c">
              <el-button type="primary" @click="getIpInfoFn">ip位置</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content ep-bg-purple" />
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <span>测试mock接口</span>
              </div>
            </template>
            <div class="flex-c">
              <el-button type="primary" @click="testFn">mock数据</el-button>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
        <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
      </el-row>
    </div>
  </div>
</template>
